@()(implicit request: RequestHeader)

@main("PlayScala社区 - 社区词典", "dict") {
<style>
.search-input {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}
.search-logo {
    margin: 0px 0 0;
    padding: 40px 0 40px;
    text-align: center;
}
</style>
<div class="layui-container" style="margin-top: 10px; margin-bottom: 100px;">
    <div class="search-logo">
        <p>
            <img src="/assets/images/dict-200.png" alt="PlayScala社区" style="width: 180px;height:180px;">
        </p>
    </div>
    <div class="layui-row layui-col-space0">
        <div class="layui-col-md3 layui-col-xs5 layui-col-md-offset4 layui-col-xs-offset3">
            <input id="query" type="text" name="q" required lay-verify="required" placeholder="请输入单词" autocomplete="off" class="layui-input search-input">
        </div>
        <div class="layui-col-md4 layui-col-xs3">
            <button id="query-btn" class="layui-btn search-input">立即查词</button>
        </div>
    </div>
</div>
}

<script>
$('#query-btn').click(function(){
    query();
});

$('#query').keyup(function(e){
    if (e.keyCode == 13) {
        query();
    }
});

function query() {
    var q = $('#query').val();
    if(q.replace(/\s/g, '') === ''){
        return false;
    }
    window.location.href = "/dict/" + q;
}

</script>
